import {messages} from "share/common";
import React from 'react'
import { connect } from 'react-redux'
import { Form, Switch, Icon, Input, Button, Row, Col, message } from 'antd'
import budgetGroupService from 'containers/budget-setting/budget-organization/budget-group/budget-group.service'
import menuRoute from 'routes/menuRoute'
import { LanguageInput } from 'components/template';

const FormItem = Form.Item;

class NewBudgetGroup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      budgetGroupDetail: menuRoute.getRouteItem('budget-group-detail','key'),    //项目组详情的页面项
      budgetOrganization: menuRoute.getRouteItem('budget-organization-detail', 'key'),  //预算组织详情的页面项
      loading: false,
      i18n: {}
    };
  }

  handleSave = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        values.organizationId =  this.props.organization.id;
        values.i18n = this.state.i18n;
        this.setState({loading: true});
        budgetGroupService.addOrganizationGroup(values)
          .then((res) => {
            message.success(`${messages('budget-setting.key53'/*项目组*/)}${messages('common.create.success', { name: res.data.itemGroupName })}`);/*项目组新建成功*/
            this.context.router
              .replace(this.state.budgetGroupDetail.url.replace(':id', this.props.organization.id)
              .replace(':groupId', res.data.id));
          })
          .catch((e) => {
            if (e.response) {
              message.error(`${messages('common.create.filed')/*新建失败*/}, ${e.response.data.message}`);
            }
          })
          .finally(() => {
            this.setState({ loading: false });
          });
      }
    });
  };

  handleI18n = (name, value) => {
    let { i18n, itemGroupName } = this.state;
    i18n.itemGroupName = value;
    itemGroupName = name;
    this.setState({ itemGroupName, i18n });
  };

  render(){
    const { loading, itemGroupName, i18n } = this.state;
    const { getFieldDecorator } = this.props.form;

    return (
      <div onSubmit={this.handleSave}>
        <h3 className="header-title">{messages('budget-setting.key54'/*新建预算项目组*/)}{/*新建预算项目组*/}</h3>
        <div className="common-top-area">
          <Form>
            <Row gutter={40}>
              <Col span={8}>
                <FormItem label={messages('budget-setting.key47'/*预算组织*/)}>
                  {getFieldDecorator("organizationName", {
                    initialValue: this.props.organization.organizationName
                  })(
                    <Input disabled />
                  )}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label={messages('budget-setting.key48'/*预算项目组代码*/)}>
                  {getFieldDecorator("itemGroupCode", {
                    rules: [{
                      required: true,
                      message: messages('common.please.enter'),  //请输入
                    }],
                    initialValue: ''
                  })(
                    <Input placeholder={messages('common.please.enter')/*请输入*/}/>
                  )}
                </FormItem>
              </Col>
              <Col span={8}>
                <FormItem label={messages('budget-setting.key49'/*预算项目组名称*/)}>
                  {getFieldDecorator("itemGroupName", {
                    rules: [{
                      required: true,
                      message: messages('common.please.enter'),  //请输入
                    }],
                    initialValue: ''
                  })(
                    <LanguageInput
                      name={itemGroupName}
                      i18nName={i18n.itemGroupName || null}
                      nameChange={this.handleI18n}
                      placeholder={messages('common.please.enter')/* 请输入 */}/>
                  )}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={8}>
                <FormItem label={messages('common.column.status')/*状态*/}>
                  {getFieldDecorator('isEnabled', {
                    initialValue: true,
                    valuePropName: 'checked'
                  })(
                    <Switch checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="cross" />}/>
                  )}&nbsp;&nbsp;&nbsp;&nbsp;{this.props.form.getFieldValue('isEnabled') ? messages('common.status.enable') : messages('common.status.disable')}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={8}>
                <Button htmlType="submit" type="primary" loading={loading}>{messages('common.save') /* 保存 */}</Button>
                <Button style={{ marginLeft: 8 }} onClick={() => {this.context.router.push(this.state.budgetOrganization.url.replace(":id", this.props.organization.id) + '?tab=GROUP');}}>{messages('common.cancel')/*取消*/}</Button>
              </Col>
            </Row>
          </Form>
        </div>
      </div>
    )
  }

}

function mapStateToProps(state) {
  return {
    organization: state.budget.organization
  }
}

NewBudgetGroup.contextTypes = {
  router: React.PropTypes.object
};

const WrappedNewBudgetGroup = Form.create()(NewBudgetGroup);

export default connect(mapStateToProps)(WrappedNewBudgetGroup);
